<template>
	<view class="browse column">
		<text class="justify-end ptb20 plr35" @click="isEdit=!isEdit" :style="{color:isEdit?'#0759bb':''}"
			v-if="listData.length>0">{{isEdit?'完成':'管理'}}</text>
		<view class="flex-1 b column scrolly bgf">
			<scroll-view scroll-y class="h100" :refresher-enabled="scrollViewTool.isEnabled"
				refresher-background="rgba(0,0,0,0)" :refresher-triggered="scrollViewTool.triggered"
				@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false"
				@refresherabort="triggered = false" @scrolltolower="reachBottom">
				<view class="" v-if="listData.length>0">
					<view class="list_item align-center" v-for="item in listData" :key="item">
						<view class="mr10" v-if="isEdit">
							<u-checkbox usedAlone v-model:checked="item.check" shape="circle" />
						</view>
						<u-image src="" width="220rpx" height="164rpx" radius="10rpx" />
						<view class="ml24 flex-1 column justify-between" style="height: 164rpx;">
							<view class="column">
								<text class="bold ellipsis lines-2">{{item.relatedItem.name}}</text>
								<text class="mt6 fs24 color6">{{item.relatedItem.on_plate_time}}/{{item.relatedItem.mileage}}万公里</text>
							</view>
							<view class="align-center justify-between">
								<view class="align-center color6 fs24">
									<u-icon name="map" />
									<text class="ml10">{{item.relatedItem.province}}</text>
								</view>
								<text class="base-price fs30 bold">{{item.relatedItem.price}}万</text>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</view>
				<view v-else class="flex-1 hb centerV">
					<fr-empty-record />
				</view>
			</scroll-view>
		</view>
		<view class="align-center justify-between bgf p30" style="border-top: 1rpx solid #efefef;" v-if="isEdit">
			<u-checkbox label="全选" usedAlone v-model:checked="checkAll" shape="circle" />
			<u-button type="error" plain text="删除" shape="circle" :customStyle="{height:'80rpx',width:'180rpx',margin:'0'}"
				@click="onDel" />
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import {
		getBrowseRecord,
		delBrowseRecord,
	} from "@/api/user/browse.js";
	import {
		showModel,
		showSuccess,
		showToast
	} from "@/core/app";
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList';
	const {
		listData,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} = useLoadPageList(getBrowseRecord);
	onLoad(() => {
		reSetList()
	})
	const isEdit = ref(false)
	const checkAll = ref(false)
	const onDel = async () => {
		let ids = listData.value.filter(item => item.check).map(v => v.id)
		if (ids.length <= 0) return showToast('请选择要删除的浏览记录')
		showModel({
			content: '确定要删除所选浏览吗?',
			confirm: async () => {
				let res = await delBrowseRecord({
					ids: ids.join(',')
				})
				showSuccess('删除成功')
				setTimeout(() => {
					reSetList()
				}, 1000)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.browse {
		height: 100%;

		.list_item {
			padding: 31rpx 20rpx;
			border-bottom: 1rpx solid #EDEDED;
		}
	}
</style>